<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

onMounted(()=>{
  loadOperationLog();
})
//定义对象用来保存搜索卡片的操作日志搜索条件
const searchOperationLog = ref({
  parkingId:'',
  type:'',
  adminId:''
});
//定义数组用来保存所有的操作日志数据(模拟数据)
const operationLogArr = ref([]);
//重置
const resetSearch = () => {
  searchOperationLog.value = {}
  loadOperationLog();
}
//定义方法加载所有的操作日志数据
const loadOperationLog = ()=>{
  let data = qs.stringify(searchOperationLog.value);
  axios.get(BASE_URL+'/v1/operation/select?'+data).then((response)=>{
    if(response.data.code === 2000){
      operationLogArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义删除按钮的方法
const deleteOperationLog = (id)=>{
  if(confirm('您确认要删除该日志吗?')){
    axios.post(BASE_URL+'/v1/operation/delete/'+id).then((response)=>{
      if(response.data.code === 2000){
        ElMessage.success('删除成功!');
        //删除成功后重新加载所有车辆数据
        loadOperationLog();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
}
</script>

<template>
  <!-- 顶部条 -->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">操作日志详情</span>
  </div>
  <!--操作日志搜索卡片-->
  <el-card style="margin: 20px;">
    <el-form :inline="true">
      <el-form-item label="停车场编号:" style="width: 35vh;">
        <el-input placeholder="请输入停车场编号" v-model="searchOperationLog.parkingId" @keydown.enter="loadOperationLog"></el-input>
      </el-form-item>
      <el-form-item label="操作类别:" style="width: 35vh;">
        <el-select placeholder="请输入管理类别" v-model="searchOperationLog.type">
          <el-option label="停车场管理" value="停车场管理"/>
          <el-option label="停车位管理" value="停车位管理"/>
          <el-option label="计费规则管理" value="计费规则管理"/>
          <el-option label="车位卡管理" value="车位卡管理"/>
          <el-option label="设备管理" value="设备管理"/>
          <el-option label="黑名单管理" value="黑名单管理"/>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人员ID:" style="width: 35vh;">
        <el-select placeholder="请选择操作人员ID" v-model="searchOperationLog.adminId">
          <el-option label="1" value="1"/>
          <el-option label="2" value="2"/>
          <el-option label="3" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadOperationLog">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 操作日志详情数据列表 -->
  <el-card style="margin: 20px;">
    <el-table style="width: 100%" :data="operationLogArr">
      <el-table-column label="序号" type="index" width="200px" align="center"/>
      <el-table-column label="停车场编号" prop="parkingId" align="center"/>
      <el-table-column label="类别" prop="type" align="center"/>
      <el-table-column label="内容" prop="content" align="center"/>
      <el-table-column label="操作人员" prop="adminId" align="center"/>
      <el-table-column label="创建时间" prop="createTime" align="center"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" @click="deleteOperationLog(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>

</style>